<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏吉尔人物卡</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body{
            background-color: #000000;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect fill='none' stroke-width='200' stroke-opacity='0.06' id='a' x='-400' y='-300' width='800' height='600'/%3E%3C/defs%3E%3Cg style='transform-origin:center'%3E%3Cg transform='' style='transform-origin:center'%3E%3Cg transform='rotate(-160 0 0)' style='transform-origin:center'%3E%3Cg transform='translate(1000 750)'%3E%3Cuse stroke='%236C72FF' href='%23a' transform='rotate(10 0 0) scale(1.1)'/%3E%3Cuse stroke='%236e7aff' href='%23a' transform='rotate(20 0 0) scale(1.2)'/%3E%3Cuse stroke='%236f82ff' href='%23a' transform='rotate(30 0 0) scale(1.3)'/%3E%3Cuse stroke='%23718bff' href='%23a' transform='rotate(40 0 0) scale(1.4)'/%3E%3Cuse stroke='%237393ff' href='%23a' transform='rotate(50 0 0) scale(1.5)'/%3E%3Cuse stroke='%23749bff' href='%23a' transform='rotate(60 0 0) scale(1.6)'/%3E%3Cuse stroke='%2376a3ff' href='%23a' transform='rotate(70 0 0) scale(1.7)'/%3E%3Cuse stroke='%2378abff' href='%23a' transform='rotate(80 0 0) scale(1.8)'/%3E%3Cuse stroke='%2379b4ff' href='%23a' transform='rotate(90 0 0) scale(1.9)'/%3E%3Cuse stroke='%237bbcff' href='%23a' transform='rotate(100 0 0) scale(2)'/%3E%3Cuse stroke='%237dc4ff' href='%23a' transform='rotate(110 0 0) scale(2.1)'/%3E%3Cuse stroke='%237eccff' href='%23a' transform='rotate(120 0 0) scale(2.2)'/%3E%3Cuse stroke='%2380d4ff' href='%23a' transform='rotate(130 0 0) scale(2.3)'/%3E%3Cuse stroke='%2382ddff' href='%23a' transform='rotate(140 0 0) scale(2.4)'/%3E%3Cuse stroke='%2383e5ff' href='%23a' transform='rotate(150 0 0) scale(2.5)'/%3E%3Cuse stroke='%2385EDFF' href='%23a' transform='rotate(160 0 0) scale(2.6)'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            background-attachment: fixed;
            background-size: cover;
        }
        .logo_img{
            position: relative;
        }
        .logo_img:after {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            box-shadow:0 0 50px 30px #000000 inset;

        }
        .bg_music{
            opacity: .4;
            position: fixed;
            bottom: 0;
            left: 0;
        }
        .list .listitem{
            height: 80px;
            transition: .8s;
        }
        .list .listitem:hover{
            transform: rotateY(360deg);
        }
        .list .listitem:nth-child(2n):hover{
            transform: rotateX(360deg);
        }
        #live2dcanvas {
            border: 0 !important;
        }
    </style>

</head>

<body class="">
    <div class="bg_music">
        <audio src="music/Merry-Go-Round.mp3" controls="controls" loop="loop"  autoplay="autoplay"> </audio>
    </div>
    <div class="container d-flex justify-content-md-center">
        <div class="logo_img  mt-5"><img src="img/head.jpeg" class="img-fluid" alt="主图"></div>
    </div>

    <div class="container w-100 h-100" id="app">
        <h1 class="text-center text-light mt-5">欢迎来到夏吉尔世界</h1>
        <p class=" text-center font-weight-light text-white-50 mt-3">请选择入口</p>
        <div class="row justify-content-md-center mt-3 list">
            <div class="col-md-3 px-0 listitem">
                <a class="text-decoration-none d-flex align-items-center justify-content-center bg-light text-dark w-100 h-100" href="createPage.html">车卡</a>
            </div>
            <div class="col-md-3 px-0 listitem">
                <a class="text-decoration-none d-flex align-items-center justify-content-center bg-dark text-light w-100 h-100" href="simulator.html">战斗模拟器</a>
            </div>
            <div class="col-md-3 px-0 listitem">
                <a class="text-decoration-none d-flex align-items-center justify-content-center bg-light text-dark w-100 h-100" href="luckyDay.html">节日活动</a>
            </div>
            <div class="col-md-3 px-0 listitem">
                <a class="text-decoration-none d-flex align-items-center justify-content-center bg-dark text-light w-100 h-100" href="backgroundPage.html">跑团信息查看</a>
            </div>
            
        </div>
    </div>

    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> 
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.0.min.js"></script> 

    <script type="text/javascript">
        L2Dwidget.init({
            "model": {jsonPath:"https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json" }, 
            "display": {
            "superSample": 2,
            "width": 100,
            "height": 200,
                 "position": "right",
                     "hOffset": 0,
            "vOffset": 0
              }
         });
    </script>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script type="module">
        import {powerList,skillList,talentList,elementList} from './js/data.js'
        var app = Vue.createApp({
            data() {
                return {

                }
            },
            created() { // 页面创建
            },
            methods:{

            }
        })
        app.mount('#app')
    </script>
</body>


</html>